<template >
  <div>
<!--    <el-container>-->
      <el-header class="homeHeader">
        <div class="title">
          Qr二维码
        </div>
        <el-dropdown class="userInfo" @command="commandHander">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="setting">设置</el-dropdown-item>
            <el-dropdown-item command="userInfo">登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

    <el-form size="medium" :model="linkData" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
<!--      长链接表单-->
      <el-form-item
          size="medium"
          label="长链接"
          prop="age"
          style="margin-bottom: 20px;margin-top: 50px">
        <el-input  v-model="linkData.longLink" autosize placeholder="请输入长链接内容"></el-input>
      </el-form-item>
<!--      短链接表单-->
      <el-form-item
          size="medium"
          label="短链接">
      <el-input v-model="linkData.shortLink" placeholder="看什么看，越看越短！"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('numberValidateForm')" style="width: 100px" >生成</el-button>
      </el-form-item>

    </el-form>
    <vue-qr v-if=flag :text=linkData.shortLink :size="250" style="margin-left: 280px" colorDark="#4169E1" colorLight="#fff"></vue-qr>

  </div>
</template>

<script>
export default {
  data() {
    return {
      flag:false,
      linkData: {
        longLink: '',
        shortLink: '',
        img: '../img/QR.png'
      }
    };
  },

  methods: {
    submitForm() {
      this.postRequest("/link/create?longLink="+this.linkData.longLink ).then((resp) => {
        if(resp.code==200){
          this.flag=true;
        }
        this.initShortLink();
        this.linkData.shortLink =resp.data;
      })
    },

    initShortLink() {
      this.linkData.shortLink = '';
    },

    commandHander(){
        this.$router.replace('/login')
      // }
    }

  }
}

</script>

<style scoped>
.demo-ruleForm {
  width: 650px;

}
.homeHeader{
  background: #407cff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}
.homeHeader .title{
  font-size: 35px;
  font-family: 华文楷体;
  color: #ffffff;
  margin-left: 320px;
}

.homeHeader .userInfo{
  cursor: pointer;
}


</style>
